<template>
  <div  id="PostMain">
    <ul>
      <li class="flex border-b flex-row py-[15px] h-[180px]" v-for="item in data" :key="item.title">
        <div class="w-[220px] bg-slate-200">
          <img :src="item.image">
        </div>
        <div class="flex-1 pl-8">
          <p>{{item.title}}</p>
          <p class="text-sm text-slate-500 mt-4 mb-6"> {{item.content}} </p>
          <p class="text-sm text-slate-500">
            <span>{{item.location}}</span>
            <span class="text-[#ff9d00] mx-[10px]">{{item.author}}</span>
            <span>{{item.view}}</span>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script setup>
import { articleList } from '@/composables/article'
const {data} = useAsyncData('atricle', () => 
  articleList().then(res => {
    console.log(res)
    return res.data
  })
)
</script>
<style scoped>

</style>